<template>
  <div>
    <h2>{{audit}}</h2>
    <h2>学生姓名:{{audit.name}}</h2>
    <h2>学生年龄:{{audit.age}}</h2>
    <h2>学生选课:{{audit.course}}</h2>
    <h2>{{audit.mm.xx.yy}}</h2>
    <h2><button @click="audit.name += '~' ">姓名+~</button></h2>
    <h2><button @click="audit.age += 1">age+1</button></h2>
    <h2><button @click="audit.mm.xx.yy += '1' ">audit.mm.xx.yy += 1</button></h2>

    <h2>{{x.y}}</h2>
    <h2><button @click="x.y += 1">x+1</button></h2>
  </div>
</template>
<script>
  import {ref,toRef,toRefs,reactive,shallowReactive,shallowRef} from "vue";

  export default {
    name: "Test",
    setup() {
      //let audit = shallowReactive 值定义第一层为响应式
      let audit = shallowReactive({
        name: 'xfj',
        age: 98,
        course: ['语文', '数学', '英语'],
        mm:{
          xx:{
            yy:'111'
          }
        }
      })

      //只能定义数值类型的响应式
      let x = shallowRef({
        y:0
      })

      function deleteIndex(){
        audit.course.shift();
      }


      return {
        audit,
        x,
        deleteIndex
        
      }
    }
  };
</script>
<style>
</style>